@font-face {
    font-family: Vazirmatn;
    src: url('/fonts/Vazirmatn-Regular.eot');
    src: url('/fonts/Vazirmatn-Regular.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Vazirmatn-Regular.woff2') format('woff2'),
         url('/fonts/Vazirmatn-Regular.woff') format('woff'),
         url('/fonts/Vazirmatn-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.category-label {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: green;
    color: white;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 0.8em;
    z-index: 1;
}

.card {
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@font-face {
    font-family: Vazirmatn;
    src: url('/fonts/Vazirmatn-Bold.eot');
    src: url('/fonts/Vazirmatn-Bold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Vazirmatn-Bold.woff2') format('woff2'),
         url('/fonts/Vazirmatn-Bold.woff') format('woff'),
         url('/fonts/Vazirmatn-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: Vazirmatn;
    src: url('/fonts/Vazirmatn-Black.eot');
    src: url('/fonts/Vazirmatn-Black.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Vazirmatn-Black.woff2') format('woff2'),
         url('/fonts/Vazirmatn-Black.woff') format('woff'),
         url('/fonts/Vazirmatn-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: Vazirmatn;
    src: url('/fonts/Vazirmatn-Medium.eot');
    src: url('/fonts/Vazirmatn-Medium.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Vazirmatn-Medium.woff2') format('woff2'),
         url('/fonts/Vazirmatn-Medium.woff') format('woff'),
         url('/fonts/Vazirmatn-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: Vazirmatn;
    src: url('/fonts/Vazirmatn-Light.eot');
    src: url('/fonts/Vazirmatn-Light.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Vazirmatn-Light.woff2') format('woff2'),
         url('/fonts/Vazirmatn-Light.woff') format('woff'),
         url('/fonts/Vazirmatn-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../fonts/Vazirmatn-Thin.eot');
    src: url('../fonts/Vazirmatn-Thin.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Vazirmatn-Thin.woff2') format('woff2'),
         url('../fonts/Vazirmatn-Thin.woff') format('woff'),
         url('../fonts/Vazirmatn-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

/* Basic Styling */
body {
    font-family: Vazirmatn, tahoma !important;
    direction: rtl;
}

/* Styles for smaller menu item cards in Modern Small theme */
.menu-item .card {
    /* Reduce overall card padding if needed */
    /* padding: 0.5rem; */
}

.menu-item .col-5 img {
    max-height: 80px !important; /* Further reduce image height */
}

.menu-item .card-body {
    padding: 0.5rem 0.75rem; /* Reduce padding inside the text area */
}

.menu-item .card-title {
    font-size: 0.9rem; /* Smaller title */
    margin-bottom: 0.25rem; /* Less space below title */
}

.menu-item .card-text {
    font-size: 0.8rem; /* Smaller text */
    margin-bottom: 0.25rem; /* Less space below text */
}

.menu-item .card-text.small {
    font-size: 0.75rem; /* Even smaller description */
}

.menu-item .card-actions {
    margin-top: 0.25rem !important; /* Less space above actions */
}

.menu-item .quantity-selector .quantity-btn {
    width: 24px; /* Smaller buttons */
    height: 24px;
    font-size: 0.8rem;
}

.menu-item .quantity-selector .quantity-input {
    width: 35px; /* Narrower input */
    height: 24px; /* Match button height */
    font-size: 0.8rem;
    padding: 0.1rem 0.2rem; /* Reduce padding */
}

.menu-item .add-to-order.btn-sm {
    padding: 0.15rem 0.4rem; /* Smaller padding for add button */
    font-size: 0.75rem; /* Smaller font size */
}

/* Adjust outer column if needed, e.g., make it narrower */
/* .menu-item.col-md-4 {
    flex: 0 0 25%;
    max-width: 25%;
} */

/* Styles for smaller category navigation in Modern Small theme */
.category-item {
    margin: 0 5px; /* Reduce horizontal margin */
    padding: 5px 0; /* Reduce vertical padding */
}

.category-image {
    width: 50px !important; /* Smaller width, use !important to override if needed */
    height: 50px !important; /* Smaller height, use !important to override if needed */
    margin-bottom: 3px; /* Reduce space below image */
}

.category-item span {
    font-size: 0.7em !important; /* Smaller font size, use !important to override if needed */
}

.banner {
    position: relative;
    text-align: center;
    color: white;
}

.banner-image {
    width: 100%;
    height: auto;
}

.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    text-shadow: 2px 2px 4px #000000;
}

.banner-text h1 {
    font-size: 2.5em !important;
}

.banner-text p {
    font-size: 1.2em !important;
}

@media (max-width: 768px) {
  .banner-text h1 {
    font-size: 1.8em !important;
  }

  .banner-text p {
    font-size: 1em !important;
  }
}

.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
}

.menu-item {
    padding: 8px;
    margin-bottom: 8px;
    /* Removed circular shape and fixed dimensions */
    display: none; /* Initially hidden */
    direction: rtl;
}

.menu-item.visible {
  display: block;
}

.menu-item img {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* Circular shape */
    object-fit: cover; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto;
}

#category-buttons .btn {
    margin: 0px;
}

#category-buttons {
    white-space: nowrap;
    overflow-x: auto;
    padding: 0 20px; /* Add padding to the left and right */
    width: 100%; /* Ensure full width */
}

.category-image {
    border-radius: 0.5rem; /* Rounded rectangle */
    max-width: 100px; /* Adjust as needed */
    max-height: 100px;
    display: block; /* To center the image */
    margin: 0 auto 10px; /* Center horizontally and add bottom margin */
}

#category-buttons .col-md-2 {
    display: inline-block;
    float: none;
    /* margin-left: -100px;
    margin-right: -100px;
    padding-left: -100px;
    padding-right: -100px;*/
}

.footer {
    background-color: #f8f9fa;
    color: black;
    padding: 20px 0;
    margin-top: 20px;
}

.footer-content {
    text-align: center;
}

.footer-content img {
    max-width: 50%;
    height: auto;
    margin-bottom: 10px;
}

.footer-image {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}

.category-menu {
    text-align: center;
    margin-top: 20px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
}

.category-scroll {
    display: inline-block;
}

.category-item {
    display: inline-block;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: black;
    margin: 0 10px;
}

.category-item span {
    font-size: 0.9em;
}

.category-image {
    border-radius: 0.5rem;
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-bottom: 5px;
}

.order-summary {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f8f9fa;
    padding: 10px;
    text-align: center;
    z-index: 1000;
}

.card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.quantity-selector {
    display: flex;
    align-items: center;
}

.quantity-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0; /* Remove padding */
    width: 28px; /* Set explicit width to make it square */
    height: 28px; /* Set explicit height to match input */
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    line-height: 1; /* Ensure proper vertical alignment of text */
}

.quantity-input {
    width: 50px; /* Slightly wider input */
    text-align: center;
    margin: 0 5px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 5px; /* Add padding for better visual */
}

.add-to-order {
    flex-grow: 1; /* Button takes remaining space */
    margin-right: 10px; /* Space between quantity and button */
}

/* RTL adjustments for order_confirmation.php */
.order-confirmation .table th,
.order-confirmation .table td {
    text-align: right; /* Right-align table cells */
}

.order-confirmation .table tfoot tr td:first-child {
    text-align: right; /* Right-align "جمع کل" text */
}

.order-confirmation {
    text-align: right; /* General right-alignment for order confirmation page */
}

.order-confirmation h2 {
    text-align: center; /* Center the heading text */
    margin-top: 20px; /* Add margin above the heading */
}

.confirmation-header-box {
    border: 0.5px solid #aaa; /* Slightly darker, thinner grey border */
    border-radius: 10px;
    padding: 10px; /* Reduced padding */
    margin-bottom: 20px;
}

body {
    font-family: Vazirmatn, tahoma !important;
    direction: rtl;
}